<template>
  <div class="contentLayout">
    <Snackbar title="开通账户"/>
    <van-form @submit="onSubmit">
      <van-cell-group title="代理商信息">
        <van-field v-model="fromData.agentName" label="联系人昵称" label-width="80" placeholder="代理商公司或姓名"
                   :maxlength="20"
                   :rules="[{ required: true, message: '必填项' }]"/>
        <van-field v-model="fromData.phone" label="联系人电话" label-width="80" placeholder="联系人手机或电话"
                   :maxlength="20"
                   :rules="[{ required: true, message: '必填项' }]"/>

        <van-field label="所在城市" v-model="fromData.city" placeholder="请选择所在城市" right-icon="arrow" v-on:click="selectCity"
                   value="" readonly :rules="[{ required: true, message: '请选择' }]"/>

        <van-field v-model="fromData.address" label="详细地址" label-width="80" placeholder="请输入详细地址"
                   :maxlength="100"
                   :rules="[{ required: true, message: '必填项' }]"/>
      </van-cell-group>
      <van-button :loading="loading" :disabled="loading" type="info" block>确认修改</van-button>
    </van-form>
    <van-action-sheet v-model="showCitySelect" :closeable="false">
      <van-picker show-toolbar title="标题" :columns="cityList" value-key="areaName" v-on:confirm="onSelectCity"
                  v-on:cancel="showCitySelect = false" ref="city"/>
    </van-action-sheet>
    <LodingProgress :show="showLoading"></LodingProgress>

  </div>

</template>

<script>
  import Snackbar from '@/components/Snackbar/index'
  import {cityList} from "@/api/common";
  import {loginInfo, updateUser} from "@/api/user";
  import {Dialog} from 'vant';

  export default {
    name: "editInfo",
    components: {Snackbar},
    data() {
      return {
        loading: false,
        showLoading: false,
        showCitySelect: false,
        cityList: [],
        fromData: {
          agentName: "",
          phone: "",
          city: "",
          provinceId: null,
          cityId: null,
          districtId: null,
          address: "",
        }
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let _this = this;
        _this.showLoading = true;
        loginInfo({details: "0"}).then(respose => {
          _this.showLoading = false;
          _this.fromData = respose.data;
          _this.fromData.city = respose.data.provinceName + " " + respose.data.cityName + " " + respose.data.districtName
        }, error => {
          _this.showLoading = false;
        })
      },
      onSubmit() {
        let _this = this;
        this.loading = true;
        updateUser(this.fromData).then(response => {
          _this.loading = false
          Dialog.alert({
            title: '系统提示',
            message: '修改成功',
          }).then(() => {
            _this.$router.back();
          });
        }, error => {
          _this.loading = false
        })
      },
      selectCity() {
        this.showCitySelect = true;
        let _this = this;
        if (this.cityList != null && this.cityList.length != 0) return;
        cityList().then(response => {
          let list = response.data;
          _this.cityList = list;
        })
      },
      onSelectCity(value) {
        this.fromData.city = value[0] + "  " + value[1] + "  " + value[2];
        let data = this.$refs.city.getValues();
        this.fromData.provinceId = data[0].id;
        this.fromData.cityId = data[1].id;
        this.fromData.districtId = data[2].id;
        this.showCitySelect = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
